<template>
    <div class="file">
        <div class="file-left">
            <template v-if="list">
                <div v-for="(item, index) in list" :key="item" class="file-item">
                    <el-image
                        style="width: 28px; height: 28px;background-color: #e5e5e5;border-radius: 6px;"
                        :src="`http://localhost:8099/${item}`"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :initial-index="index"
                        :preview-src-list="previewList"
                        :infinite="false"
                        fit="contain"
                        preview-teleported
                        />
                </div>
            </template>
        </div>
        <div class="file-right">
            <el-upload
              class="file-upload"
              action="http://localhost:8099/doc/upload"
              :data="{
                id: form.id
              }"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <el-icon class="file-upload-icon"><Plus /></el-icon>
            </el-upload>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'

defineProps({
    form: {
        type: Object,
        default: () => ({})
    },
    width: Number
})

const list: any = defineModel()
const previewList = computed(() => {
    if (!list.value) return []
    return list.value?.map((item: string) => {
        return `http://localhost:8099/${item}`
    })
})
const emit = defineEmits(['leave'])
const handleAvatarSuccess: UploadProps['onSuccess'] = (res, uploadFile) => {
    list.value = list.value ? [...list.value, ...res.data] : [...res.data]
    emit('leave')
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log('rawFile.type', rawFile.type);
    // if (rawFile.type !== 'image/jpeg') {
    //     ElMessage.error('Avatar picture must be JPG format!')
    //     return false
    // } else if (rawFile.size / 1024 / 1024 > 2) {
    //     ElMessage.error('Avatar picture size can not exceed 2MB!')
    //     return false
    // }
    return true
}
</script>

<style lang="scss" scoped>
.file {
    display: flex;
    align-items: center;
    width: 100%;
    &-left{
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: 10px;
        overflow: hidden;
    }
    &-right{
        width: 36px;
        display: flex;
        align-items: center;
        padding-left: 4px;
    }
    &-item {
        width: 28px;
        height: 28px;
        display: block;
        margin-right: 4px;
    }
    &-upload{
        :deep(.el-upload) {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }
        :deep(.el-upload:hover) {
            border-color: var(--el-color-primary);
        }
        &-icon{
            font-size: 16px;
            color: #8c939d;
            width: 26px;
            height: 26px;
            text-align: center;
        }
    }
}
</style>
